<template>
	<div class="steps-container layout-pd">
		<el-card shadow="hover" header="拼团商品">
			<el-steps :active="stepsActive" align-center>
				<el-step title="选择拼团商品">
					<template #icon>
						<SvgIcon name="iconfont icon-1_round_solid" :size="40" />
					</template>
				</el-step>
				<el-step title="填写商品信息">
					<template #icon>
						<SvgIcon name="iconfont icon-2_round_solid" :size="40" />
					</template>
				</el-step>
				<el-step title="修改商品详情">
					<template #icon>
						<SvgIcon name="iconfont icon-3_round_solid" :size="40" />
					</template>
				</el-step>
			</el-steps>
			<section class="mt10">
				<stepOne :goodsData="state.goodsData" ref="stepOneRef" @updateGoodsData="updateGoodsData" v-if="stepsActive === 1"></stepOne>
				<stepTwo :goodsData="state.goodsData" ref="stepTwoRef" @updateGoodsData="updateGoodsData" v-if="stepsActive === 2"></stepTwo>
				<stepThree :goodsData="state.goodsData" ref="stepThreeRef" @updateGoodsData="updateGoodsData" v-if="stepsActive === 3"></stepThree>
			</section>
			<section class="mt10 flex" style="justify-content: center;">
				<el-button @click="onPreviousSteps" v-if="stepsActive !== 1"  class="mt15" type="primary">
					<SvgIcon name="iconfont icon-step" /> 上一步
				</el-button>
				<el-button @click="onNextSteps"  v-if="stepsActive === 3" class="mt15" type="primary">
					提交
				</el-button>
				<el-button @click="onNextSteps" v-if="stepsActive != 3" class="mt15" type="primary">
					<SvgIcon name="iconfont icon-step" /> 下一步
				</el-button>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="pagesSteps">
import { ref,reactive, defineAsyncComponent } from 'vue';
const stepOne = defineAsyncComponent(() => import('/@/views/marketing/groupBuyingManage/goods/components/stepOne.vue'))
const stepTwo = defineAsyncComponent(() => import('/@/views/marketing/groupBuyingManage/goods/components/stepTwo.vue'))
const stepThree = defineAsyncComponent(() => import('/@/views/marketing/groupBuyingManage/goods/components/stepThree.vue'))
const stepOneRef = ref();
const stepTwoRef= ref();
const stepThreeRef = ref();

const state = reactive({
	// 添加图片类型
	goodsData:{},
})


// 定义变量内容
const stepsActive = ref(1);

const updateGoodsData = (newData:any) => {
	state.goodsData = newData;
}

// 上一步
const onPreviousSteps = () => {
	if (stepsActive.value > 1){
		stepsActive.value --;
	}
};

// 下一步点击
const onNextSteps = () => {
	if (stepsActive.value++ > 2) stepsActive.value = 1;
};
</script>
